<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-select v-model="listQuery.egg_type" filterable clearable placeholder="开奖类型">
        <el-option label="单次" :value="0" />
        <el-option label="十次" :value="1" />
        <el-option label="百次" :value="2" />
      </el-select>
      <el-input v-model="listQuery.userId" clearable placeholder="用户id" type="number"></el-input>

      <el-input v-model="listQuery.minDiamond" clearable placeholder="礼物对应最小钻石" type="number"></el-input>
      -
      <el-input v-model="listQuery.maxDiamond" clearable placeholder="礼物对应最大钻石" type="number"></el-input>
      <el-input v-model="listQuery.minRate" clearable placeholder="最小返奖比例" type="number"></el-input>
      -
      <el-input v-model="listQuery.maxRate" clearable placeholder="最大返奖比例" type="number"></el-input>

      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        clearable
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        :loading="listLoading"
        @click="handleFilter"
      >查询</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
      <el-button
        type="warning"
        @click="exportExcel('#WashAway-out-table', '扭蛋开奖记录')"
      >导出</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        id="WashAway-out-table"
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户ID" prop="accountId">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.accountId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户昵称" prop="nickName"> </el-table-column>
        <el-table-column align="center" label="用户性别" prop="gender">
          <template slot-scope="{ row }">
            {{ row.gender | gender }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开奖类型" prop="eggType">
          <template slot-scope="{ row }">
            {{ eggType[row.eggType] }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="花费花粉" prop="cost">
          <template slot-scope="{ row }">
            {{ row.cost / 10 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="开出礼物" prop="gift"> </el-table-column>
        <el-table-column align="center" label="礼物对应钻石价值" prop="diamondValue"> </el-table-column>
        <el-table-column align="center" label="返奖比例" prop="rate">
          <template slot-scope="{ row }">
            {{ row.rate }} %
          </template>
        </el-table-column>
        <el-table-column align="center" label="开奖后个人奖池(钻石)" prop="personPool">
          <template slot-scope="{ row }">
            <span>{{ (row.personPool / 10).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计花费花粉" prop="costCount">
          <template slot-scope="{ row }">
            {{ row.costCount / 10 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="累计开出礼物钻石价值" prop="diamondCount">
          <!--          累计开出礼物钻石价值 需要加上本地开出礼物的钻石价值 数据没有加这里前端加了一下-->
          <template slot-scope="{ row }">{{ row.diamondCount + row.diamondValue }}</template>
        </el-table-column>
        <el-table-column align="center" label="开奖时间" prop="updateTime">
          <template slot-scope="{ row }">{{ row.updateTime | parseTime }}</template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import { xhrGetEggRecords } from '@/api/analysis'
  export default {
    name: 'LuckyEgg',
    components: { TablePagination },
    data() {
      return {
        daterangeValue: '',
        list: [],
        channels: [],
        total: 0,
        listQuery: {
          offset: 0,
          limit: 100,
          startTime: null,
          endTime: null
        },
        eggType: {
          0: '单次', 1: '十连抽', 2: '一百连抽'
        }
      }
    },

    created() {
      this.doSearch()
    },

    methods: {
      doSearch() {
        xhrGetEggRecords(this.listQuery).then(resp => {
          console.log(resp)
          this.total = resp.data.count
          this.list = resp.data.list
          this.listLoading = false
        }).catch(resp => {
          console.log(resp)
          this.listLoading = false
        })
      },
      onGoDetail(id) {
        this.$router.push('/account/account-detail?id=' + id)
      }
    }
  }
</script>

<style scoped>

</style>
